<template>
  <view class='screenPopup_page' 
    :style='{top:top+"px"}' 
    :class='{mack:content_show}' 
    @tap='clickMack'
    v-if='mack_show'>
      <!-- 筛选弹窗 -->
      <view 
        class='screenPopup_content' 
        :class='{content_an:content_show}'
        @tap.stop='stop'>
        <slot/>
      </view>
  </view>
</template>

<script>
  export default {
    props: {
      top: {
        type: Number,
        default: 0
      }
    },
    data() {
      return {
        mack_show: false,
        content_show: false,
      }
    },
    methods: {
      stop() {},
      show() {
        uni.hideTabBar()
        this.mack_show = true;
        setTimeout(() => {
          this.content_show = true;
        },50)
      },
      hidden() {
        uni.showTabBar()
        this.content_show = false;
        setTimeout(() => {
          this.mack_show = false;
        },500)
      },
      clickMack() {
        this.$emit('clickMack')
      }
    }
  }
</script>

<style lang="scss" scoped>
.screenPopup_page {
  width: 100%;
  height: 100vh;
  position: fixed;
  left: 0;
  z-index: 99;
  background: rgba(0,0,0,.4);
  opacity: 0;
  transition: all .5s;
  overflow: hidden;
  .screenPopup_content {
    width: 100%;
    opacity: 0;
    transition: all .5s;
    transform: translateY(-10%);
  }
  .content_an {
    opacity: 1;
    transform: translateY(0);
  }
}
.mack {
  opacity: 1;
}
</style>